<!--  -->
<template>
  <div class="city-page">
    <van-nav-bar
      fixed
      z-index="1000"
      border
      left-arrow
      @click-left="$router.back()"
      placeholder
      title="城市选择"
    />

    <van-cell-group>
      <van-cell class="gray" title="定位城市" />
      <div class="city-btns">
        <van-button @click="$router.push({
          path:'/shopList',
          query:{
            city:cityName
          }
        })" type="default">{{ cityName }}</van-button>
      </div>
    </van-cell-group>

    <van-cell-group>
      <van-cell class="gray" title="所有城市" />

      <van-index-bar :index-list="indexList">
        <div v-for="(item, index) in cityList" :key="index">
          <van-index-anchor :index="index" />

          <div class="city-btns">
            <van-button 
             @click="$router.push({
              path:'/shopList',
              query:{
                city: item2.city
              }
            })"
            v-for="item2 in item" :key="item2._id" type="default">{{
              item2.city
            }}</van-button>
          </div>
        </div>
      </van-index-bar>
    </van-cell-group>
  </div>
</template>

<script>
import { IndexBar, IndexAnchor } from "vant";
import mixin from '@/common/mixin'



export default {
  data() {
    return {
      cityName: "定位中",
      indexList: [],
      cityList: {},
    };
  },
  mixins:[mixin],
  components: {
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
  },
 async  mounted() {
     let cityName = await  this.getLocation();
     console.log(cityName) 
      this.cityName = cityName;
    this.getCityList();
  },
  methods: {
    // 获取城市
    getCityList() {
      this.$http.get("/city/pub/getList?group=1").then((res) => {
        console.log(res);
        if (res.code == 0) {
          // let obj = {
          //   a:1,
          //   b:2
          // }
          // Object.keys(obj)
          //   ['a','b']
          this.indexList = Object.keys(res.rows);
          this.cityList = res.rows;
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.gray {
  background: #f3f3f3;
}
.city-btns {
  padding: 12px;
  background: #fff;
}
.city-page /deep/ .van-button--normal {
  padding: 0 10px;
  margin: 3px 5px;
  height: 36px;
}
</style>